<template>
  <div :id="editorId">
    <textarea v-model="content"></textarea>
  </div>
</template>

<script>
const defaultConfig = {
  width: "100%", //宽度
  height: "100%", //高度
  path: "/lib/editor.md/lib/", // editormd你所下载的位置，这里我把他放在了static的lib目录下
  codeFold: true, // 代码折叠
  lineWrapping: true, // 编辑框不换行
  watch: false,// 实时预览
  saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
  searchReplace: true,
  htmlDecode: false,       // 开启 HTML 标签解析，为了安全性，默认不开启
  emoji: false, //使用表情
  taskList: true,
  tocm: false,         // Using [TOCM] //使用目录
  tex: true,                   // 开启科学公式TeX语言支持，默认关闭
  flowChart: true,             // 开启流程图支持，默认关闭
  sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
  imageUpload: true,
  imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  imageUploadURL: "", //这个需要你自己的后端上传图片的api
  theme : "dark",
  previewTheme : "dark",
  editorTheme : "lesser-dark",

  //我们可以自己定制编辑上方的功能，这里我是按照狂神的做的
  toolbarIcons: function () {
    return ["undo", "redo", "|",
      "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "image", "|",
      "h1", "h2", "h3", "h4", "h5", "h6", "|",
      "list-ul", "list-ol", "hr", "|",
      "link", "reference-link", "code", "code-block", "table", "datetime", "html-entities", "pagebreak", "|",
      "goto-line", "watch", "preview", "fullscreen", "clear", "search", "help", "|"
      // "model", "|", "markdown" //这两个是自定义的功能按钮的名字
    ]
  },
  //如果你还想加一些你自己的功能，你就这里写你按钮所对应的功能
  // toolbarIconTexts: {
  //   model: `<i class="fa" style="font-size: 16px;text-align: center;display: block;font-weight: bolder;padding: 5px;" name="testIcon" unselectable="on">模板</i>`,  // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
  //   markdown: `<i class="fa" name="layoutmd" unselectable="on"><a href="https://www.kuangstudy.com/bbs/1356475333565587458" target="_blank">MarkDown指南</a></i>`
  // }
}

export default {
  name: "EditorMarkdown",
  props: {
    editorId: {
      type: String,//editor名字
      default: 'editor-md',
    },
    config: { // 编辑器配置
      type: Object,
      default: null
    },
    value: {
      type: String,//editor名字
      default: '',
    },
  },
  data() {
    return {
      editor: null,
      content: ''
    }
  },
  watch:{
    content(val){
      this.$emit('input', val)
    }
  },
  created(){
    this.content = this.value
  },
  mounted() {
    //我们传入id和配置就可创建我们的编辑器
    // eslint-disable-next-line no-undef
    this.editor = editormd(this.editorId, this.getConfig());
    setTimeout(()=>{
      this.editor.on('change', () =>{
        // testEditor.getMarkdown();       // 获取 Markdown 源码
        // testEditor.getHTML();           // 获取 Textarea 保存的 HTML 源码
        // testEditor.getPreviewedHTML();  // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用

        // const getMarkdown = this.editor.getMarkdown()
        // const getHTML = this.editor.getHTML()
        const getPreviewedHTML = this.editor.getPreviewedHTML()
        this.$emit('input', getPreviewedHTML)
        // console.log(getMarkdown, getHTML, getPreviewedHTML)
      })
    })
  },

  methods: {
    //获取编辑器所需的配置，如果没有传入config参数，我们就是用默认配置
    getConfig() {
      if (this.config) {
        return {...defaultConfig, ...this.config};
      } else {
        return defaultConfig
      }
    }
  },
}
</script>
